<style lang="less">
    @import "../../styles/common.less";
</style>

<template>
    <div>
        <Spin size="large" fix v-if="spinShow"></Spin>
        <Table ref="table" disabled-hover :columns="columns" :data="tableData"></Table>
        <modal v-model="modal1" width="50%" title="门禁访问权限"
               class-name="vertical-center-modal" :mask-closable="false">
            <Row type="flex" justify="center">
                <HorizonTransfer
                        :data="transferData"
                        :target-keys="transferKeys"
                        :list-style="listStyle"
                        :render-format="render"
                        :titles="['待选择','已选择']"
                        :filter-method="filter"
                        filterable
                        @on-change="handleChange">
                </HorizonTransfer>
            </Row>
            <div slot="footer">
                <Button @click="handleCancel">取消</Button>
                <Button type="primary" @click="handleSubmit">确认</Button>
            </div>
        </modal>
        <modal v-model="guardSetting" width="60%" title="门禁时间设置"
               class-name="vertical-center-modal" :mask-closable="false">
            <div style="margin:10px 0 10px 0">
                <Row align="middle" type="flex">
                    <Col>
                    <p class="notwrap">门禁开放时刻</p></Col>
                    <Col class="margin-left-10">
                    <TimePicker confirm type="timerange" placement="bottom-end" style="width: 168px"
                                placeholder="请选择门禁开启时间段" format="HH:mm"
                                v-model="validTerm" v-bind:disabled="timeSwitch"></TimePicker>
                    </Col>
                    <Col class="margin-left-20">
                    <p class="notwrap">24小时全天</p></Col>
                    <Col class="margin-left-10">
                    <i-switch v-model="timeSwitch"></i-switch>
                    </Col>
                </Row>
                <Row class="margin-top-10" align="middle" type="flex">
                    <Col>
                    <p class="notwrap">门禁开放时间</p></Col>
                    <Col class="margin-left-10">
                    <SwitchButton v-for="item in weekItems" :key="item.index" v-model="weekValue[item.index]"
                                  class="margin-right-10" v-bind:name="item.value"></SwitchButton>
                    </Col>
                </Row>
            </div>
            <div slot="footer">
                <Button @click="handleSettingCancel">取消</Button>
                <Button type="primary" @click="handleSettingSubmit">确认</Button>
            </div>
        </modal>
    </div>
</template>

<script>
    /*
        todo
        1.create的时候 请求 摄像头列表数据 、 再加载员工信息
        2.对于每一个设备有一个字段保存着所有 有权限员工的id
        3.对于每一个设备有一个字段保存 其门禁时间设置 【起止时间 和 周内设置 】
        4.modal更新之后，刷新列表数据
     */
    import iconEdit from "../../images/edit.png"
    import iconFeature from "../../images/feature.png"
    import Card from "../../../node_modules/iview/src/components/card/card.vue";
    import Modal from "../../../node_modules/iview/src/components/modal/modal.vue";
    import GuardWeek from "./components/GuardWeek.vue"
    import Ajax from "@/libs/ajax";
    import Checkbox from "../../../node_modules/iview/src/components/checkbox/checkbox.vue";
    import SwitchButton from "./components/SwitchButton.vue"

    import DateUtils from '../../../node_modules/iview/src/utils/date'
    import Tooltip from "../../../node_modules/iview/src/components/tooltip/tooltip"
    import Btn from "../../../node_modules/iview/src/components/button/button"

    export default {
        components: {
            Checkbox,
            Modal,
            Card,
            GuardWeek,
            SwitchButton,
            Tooltip,
            Btn
        },
        data() {
            return {
                columns: [
                    {
                        title: 'IPC名称',
                        key: 'ipc_name',
                        width: '20%',
                        align: 'center'
                    },
                    {
                        title: '门禁开放时刻',
                        key: 'guard_time',
                        width: '15%',
                        align: 'center'
                    },
                    {
                        title: '门禁开放时间',
                        key: 'guard_week',
                        align: 'center'
                    },
                    {
                        title: '操作',
                        width: '15%',
                        align: 'center',
                        render: (h, {row, column, index}) => {
                            const buttonSpace = "10px"
                            let keys = row.ipc_permit
                            return (
                                <div class="operation">
                                    <Tooltip content="人员设置" placement="bottom">
                                        <Btn style={{background: `url( ${iconFeature})`}} onClick={() => this.showDeviceModal(row)}/>
                                    </Tooltip>
                                    <Tooltip content="时间设置" placement="bottom">
                                        <Btn style={{background: `url( ${iconEdit})`}} onClick={() => this.showSettingMoadl(row)}/>
                                    </Tooltip>

                                </div>
                            )
                        }
                    }
                ],
                tableData: [],
                listStyle: {
                    width: '250px',
                    height: '300px',
                    margin: '0 auto'
                },
                modal1: false,
                transferData: [],
                transferKeys: [],
                guardSetting: false,
                validTerm: ['0700', '2300'],
                timeSwitch: false,
                spinShow: false,
                staffDataLoadOverFlag: false,
                ipc_id: '',
                weekValue: {
                    0: '0',
                    1: '1',
                    2: '1',
                    3: '1',
                    4: '1',
                    5: '1',
                    6: '1',
                },
                weekItems: [
                    {
                        index: 0,
                        value: '星期日'
                    },
                    {
                        index: 1,
                        value: '星期一'
                    },
                    {
                        index: 2,
                        value: '星期二'
                    },
                    {
                        index: 3,
                        value: '星期三'
                    },
                    {
                        index: 4,
                        value: '星期四'
                    },
                    {
                        index: 5,
                        value: '星期五'
                    },
                    {
                        index: 6,
                        value: '星期六'
                    }
                ]
            }
        },
        computed: {
            guardTimeFrom: function () {
                if (this.timeSwitch) {
                    return '0000'
                } else {
                    return DateUtils.format(this.validTerm[0], 'HHmm')
                }
            },
            guardTimeTo: function () {
                if (this.timeSwitch) {
                    return '2359'
                } else {
                    return DateUtils.format(this.validTerm[1], 'HHmm')
                }
            }
        },
        created() {
            //加载设备数据
            this.loadDeviceData()
            //加载员工数据 以及 部门数据
            this.loadStaffData()
        },
        methods: {
            reloadTrasferData(targetKey) {
                this.transferKeys = targetKey
            },
            handleChange(newTargetKeys) {
                this.transferKeys = newTargetKeys
            },
            render(item) {
                return item.user_name + "(" + item.user_dept + ")"
            },
            handleSubmit() {
                //todo 更新权限
                Ajax.ajax({
                    url: '/api/guard/permit',
                    data: {
                        ipc_id: this.ipc_id,
                        in_users: this.transferKeys
                    },
                    method: 'post'
                }).then(res => {
                    this.$Message.info('success')
                    this.modal1 = false
                    this.loadDeviceData()
                })

            },
            handleCancel() {
                this.modal1 = false
            },
            filter(data, query) {
                return data.user_name.indexOf(query.trim()) >= 0 || data.user_dept.indexOf(query.trim()) >= 0
            },
            loadStaffData() {
                if (!this.staffDataLoadOverFlag) {
                    //load data
                    Ajax.ajax({
                        url: "/api/guard/query_users",
                        method: "get"
                    }).then(res => {
                        //加载数据
                        this.transferData = res.data.data
                        //获取data
                        this.staffDataLoadOverFlag = true;
                        this.spinShow = false;
                    });
                }
            },
            loadDeviceData() {
                Ajax.ajax({
                    url: '/api/guard/query',
                    method: 'get'
                }).then(res => {
                    this.tableData = res.data.data;
                    console.log(this.tableData)
                })
            },
            showDeviceModal(row) {
                if (this.staffDataLoadOverFlag) {
                    let keys = row.ipc_permit
                    this.ipc_id = row.ipc_id
                    this.reloadTrasferData(keys)
                    this.modal1 = true;
                } else {
                    this.spinShow = true;
                }
            },
            showSettingMoadl(row) {
                this.ipc_id = row.ipc_id
                this.validTerm = [row.permit_from, row.permit_to]
                if (row.permit_from == '0000' && row.permit_to == '2359') {
                    this.timeSwitch = true
                }
                this.weekValue = row.permit_week
                this.guardSetting = true
            },
            handleSettingSubmit() {
                let data = {
                    ipc_id: this.ipc_id,
                    time_from: this.guardTimeFrom,
                    time_to: this.guardTimeTo,
                    week_info: this.weekValue
                };
                Ajax.ajax({
                    url: '/api/guard/setting',
                    method: 'post',
                    data: data
                }).then(res => {
                    if (res.data.code == '0') {
                        this.loadDeviceData()
                        this.guardSetting = false
                        this.$Message.info(res.data.msg)
                    }
                });
            },
            handleSettingCancel() {
                this.guardSetting = false
            }
        },

    }
</script>
